<template>
  <div class="simpleMap-wrapper">
    <cfg-toolbar>
      <Icon type="md-apps" style="font-size: 26px; margin-left: 16px;"
        @click.native="menuShow=!menuShow;" />
      <Card v-if="menuShow" class="routingTablewp">
        <routingModel @handleDbClick="getRouting" />
      </Card>
      <template v-if="rootData.id">
        <h4 style="margin: 0 30px;"> {{ `${lang.position}: ${rootData.className}` }} </h4>
        <!-- <Button @click="showHier" style="margin-left: 16px;" >查看Hier</Button>
        <Button @click="calcAllExp" style="margin-left: 16px;" >计算公式</Button> -->
        <Button type="primary" ghost style="margin-left: 16px;" 
          @click="showSource">{{lang.source}}</Button>
        <!-- <Button type="primary" icon="md-checkmark" style="margin-left: 16px;"
          @click="saveRouting">{{lang.save}}</Button> -->
      </template>
    </cfg-toolbar>
    <Card class="sourcewp" v-show="drawerSource">
      <cfgEditTable
        class="ivu-mb" :addTpl="addTpl" :showAddBtn="true" :readOnly="true"
        v-model="hierObject.web.source" :columns="sourceColumns"
      />
      <!-- <div class="footer align-right">
        <Button @click="saveSource" type="primary">{{ lang.loadData }}</Button>
      </div> -->
    </Card>
    <Card class="messagewp" v-show="drawerCalcMessage">
      <p v-if="calcMsg.flag" >{{ lang.calcResult }}：
        <span style="color: blue;">{{calcMsg.content[0] || ''}}</span>
      </p>
      <div v-else>
        <p >{{ lang.calcResult }}：<span style="color: red;">{{lang.calcFail}}</span></p>
        <p v-for="(item,index) in calcMsg.content" :key="index" style="color: red;">{{item}}</p>
      </div>
      <div class="align-right">
        <Button @click="drawerCalcMessage=false">{{ $t(`global.close`) }}</Button>
      </div>
    </Card>
    <cfgDiagramModal
      :drawer="configDrawer"
      :data="curData"
      :hierObject="hierObject"
      @ok="panelConfirm"
      @cancel="panelCancel"
    />
    <div ref="simpleMap" class="simpleMapConfig-wrapper"></div>
    <Spin v-if="loading" fix size="large"></Spin>
  </div>
</template>

<script>
import cfgDiagramModal from 'public/components/configComp/basic/cfg-diagramModal.vue';
import routingModel from './instanceManagement/index.vue';
import simpleMapModel from 'public/model/model/hier/simpleMapModel'
import diagramMixin from 'public/components/configComp/mixins/diagramMixin'

export default {
  name: "RoutingConfig",
  components: {routingModel, cfgDiagramModal},
  mixins: [diagramMixin],
  data(){
    return {
      modelName: 'statistics',
      modelObject: simpleMapModel,
      isInstance: true,
    }
  },
  mounted() {
    // setTimeout(() => {
    //   this.getRouting({ name: 'r1' }, false)
    // }, 1000);
  },
  methods: {
    // 查询根节点和全部子节点
    getRouting(row, init = true) {
      this.closeAllDrawer()
      let filter = row.name ? `name='${row.name}'` : `id=${row.id}`
      this.classObject.query(filter).then((flag) => {
        if (flag) {
          let hier = [
            {key: 'root', value: 1, name: 'root'},
            {key: 'v1', value: 16, name: '节点1'},
            {key: 'v2', value: 26, name: '节点2'},
            {key: 'v3', value: 36.2, name: '节点3'},
          ]
          let index = hier.findIndex(item => item.key === 'root')
          if (index !== -1) {
            hier.splice(index, 1, {
              ...hier[index], id: 'root'
            })
          } else {
            hier.unshift({
              key: 'root', value: 1, name: 'root', id: 'root'
            })
          }
          let tmpHier = {
            type: 'chain',
            content: hier
          }
          this.hierObject.set(tmpHier, this.classObject.record.web)
          this.rootData = { ...this.classObject.record, id: this.hierObject.rootId }
          this.diagram.data.parse(this.hierObject.web.data)
        }
      })
    },
    _getAdditionalTemplate() {
      let template = (shape) => {
        let obj = this.hierObject.find('key', shape.properties.varName) || shape.properties
        obj.varName = obj.varName || obj.key
        return `
            <div class="shape-item flex-cm">
              <p>${obj.name || 'newNode'}</p>
              ${obj.varName ? '<p>' + obj.varName + '</p>' : ''}
              <p>${obj.value || ''}</p>
            </div>
          `
      }
      let defaults = {
        shapeType: 'workCenter',
        title: 'workCenter',
        width: 90,
        height: 90,
      }
      return {
        routingRoot: {
          //block的基本配置defaults和样式template
          defaults,
          template,
        },
        workCenter: {
          //block的基本配置defaults和样式template
          defaults,
          template,
        },
      }
    },
  },
  computed:{
    sourceColumns() {
      return [
        {
          key: 'name',
          title: 'name',
          width: 200,
          elementName: 'fieldCell',
          props: { config: { type: 'text', disabled: true } },
        },
        {
          key: 'model',
          title: 'model',
          elementName: 'fieldCell',
          props: { config: { type: 'cascader', options: this.modelTree, disabled: true } },
        },
        // {
        //   key: 'operation',
        //   slot: 'operation',
        // },
      ]
    },
  },
}
</script>

<style scoped lang="less">
.simpleMapConfig-wrapper {
  width:100%;
  height:calc(~"100% - 24px");
  /deep/ .dhx_diagram {
    background-color: #fff;
  }
  /deep/ .dhx_diagram_item {
    .shape-item {
      flex-direction:column;
      background:White;
      height:100%;
      border-radius: 50%;
      overflow: hidden;
      background: url(../../../assets/images/simpleMap/node4.png);
      background-position: center;
      background-size: 100% auto;
      background-repeat: no-repeat;
      > p {
        line-height: 30px;
        height: 30px;
        color: #fff;
        font-weight: 600;
      }
    }
  }
}
.messagewp, .sourcewp, .routingTablewp  {
  position: absolute;
  top: 40px;
  left: 20px;
  width: 80%;
  max-width: 1000px;
  background: #fff;
  z-index: 100;
}
.routingTablewp {
    width: 95%;
    max-height: calc(~"100vh - 155px");
    margin: 0;
    box-shadow: 0 3px 6px 2px #dadada;
    background-color: #fff;
    z-index: 10;
    overflow-x: hidden;
    overflow-y: auto;
    /deep/ .cli-content-outline {
      height: auto;
    }
    z-index: 101;
}
.simpleMap-wrapper {
  position: relative;
  width:100%;
  height:100%;
}
</style>
